<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <title>WebSocket 连接测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }

        .container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .status {
            padding: 15px;
            border-radius: 5px;
            margin-bottom: 20px;
            font-weight: bold;
        }

        .status.connected {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .status.disconnected {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .controls {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

        .connect-btn {
            background: #28a745;
            color: white;
        }

        .disconnect-btn {
            background: #dc3545;
            color: white;
        }

        .messages {
            border: 1px solid #ddd;
            border-radius: 5px;
            height: 400px;
            overflow-y: auto;
            padding: 15px;
            background: #f8f9fa;
        }

        .message {
            margin-bottom: 10px;
            padding: 8px;
            border-radius: 3px;
            background: white;
            border-left: 3px solid #007bff;
        }

        .message-time {
            color: #666;
            font-size: 12px;
        }

        .message-content {
            margin-top: 5px;
            font-family: monospace;
        }

        .clear-btn {
            background: #6c757d;
            color: white;
            margin-top: 10px;
            width: 100%;
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .stat-item {
            text-align: center;
            padding: 10px;
            background: #e9ecef;
            border-radius: 5px;
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #007bff;
        }

        .stat-label {
            font-size: 12px;
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>⏰ WebSocket 时间推送测试</h1>
        <p>WebSocket 连接测试，接收当前时间推送</p>
    </div>

    <div class="status disconnected" id="status">
        🔴 未连接
    </div>

    <div class="stats">
        <div class="stat-item">
            <div class="stat-value" id="messageCount">0</div>
            <div class="stat-label">接收消息数</div>
        </div>
        <div class="stat-item">
            <div class="stat-value" id="connectionTime">0s</div>
            <div class="stat-label">连接时长</div>
        </div>
        <div class="stat-item">
            <div class="stat-value" id="lastMessage">--</div>
            <div class="stat-label">最后消息</div>
        </div>
    </div>

    <div class="controls">
        <button class="connect-btn" id="connectBtn">连接 WebSocket</button>
        <button class="disconnect-btn" disabled id="disconnectBtn">断开连接</button>
        <button class="clear-btn" id="clearBtn">清空消息</button>
    </div>

    <h3>接收到的消息：</h3>
    <div class="messages" id="messages"></div>
</div>

<script>
    let websocket = null;
    let messageCount = 0;
    let connectionStartTime = null;
    let connectionTimer = null;

    const status = document.getElementById('status');
    const connectBtn = document.getElementById('connectBtn');
    const disconnectBtn = document.getElementById('disconnectBtn');
    const clearBtn = document.getElementById('clearBtn');
    const messages = document.getElementById('messages');
    const messageCountEl = document.getElementById('messageCount');
    const connectionTimeEl = document.getElementById('connectionTime');
    const lastMessageEl = document.getElementById('lastMessage');

    function updateStatus(connected) {
        if (connected) {
            status.className = 'status connected';
            status.innerHTML = '🟢 已连接到简单时间推送服务';
            connectBtn.disabled = true;
            disconnectBtn.disabled = false;
        } else {
            status.className = 'status disconnected';
            status.innerHTML = '🔴 未连接';
            connectBtn.disabled = false;
            disconnectBtn.disabled = true;
        }
    }

    function updateStats() {
        messageCountEl.textContent = messageCount;

        if (connectionStartTime) {
            const duration = Math.floor((Date.now() - connectionStartTime) / 1000);
            connectionTimeEl.textContent = duration + 's';
        }
    }

    function addMessage(content) {
        messageCount++;

        const message = document.createElement('div');
        message.className = 'message';

        const time = new Date().toLocaleTimeString();
        const timeDiv = document.createElement('div');
        timeDiv.className = 'message-time';
        timeDiv.textContent = '[' + time + ']';

        const contentDiv = document.createElement('div');
        contentDiv.className = 'message-content';
        contentDiv.textContent = content;

        message.appendChild(timeDiv);
        message.appendChild(contentDiv);

        messages.appendChild(message);
        messages.scrollTop = messages.scrollHeight;

        // 更新最后消息时间
        lastMessageEl.textContent = time;

        updateStats();
    }

    function startConnectionTimer() {
        connectionStartTime = Date.now();
        connectionTimer = setInterval(updateStats, 1000);
    }

    function stopConnectionTimer() {
        if (connectionTimer) {
            clearInterval(connectionTimer);
            connectionTimer = null;
        }
        connectionStartTime = null;
        connectionTimeEl.textContent = '0s';
    }

    function connectWebSocket() {
        try {
            addMessage('正在连接到简单时间推送服务...');
            websocket = new WebSocket('ws://localhost:8080/ws/time');

            websocket.onopen = function (event) {
                addMessage('WebSocket 连接成功！每秒将收到当前时间推送');
                updateStatus(true);
                startConnectionTimer();
            };

            websocket.onmessage = function (event) {
                addMessage('⏰ ' + event.data);
            };

            websocket.onclose = function (event) {
                addMessage('WebSocket 连接关闭，代码: ' + event.code + ', 原因: ' + event.reason);
                updateStatus(false);
                stopConnectionTimer();
            };

            websocket.onerror = function (error) {
                addMessage('WebSocket 错误: ' + error);
                updateStatus(false);
                stopConnectionTimer();
            };
        } catch (error) {
            addMessage('连接失败: ' + error.message);
            updateStatus(false);
        }
    }

    function disconnectWebSocket() {
        if (websocket) {
            websocket.close();
            websocket = null;
        }
    }

    function clearMessages() {
        messages.innerHTML = '';
        messageCount = 0;
        updateStats();
        lastMessageEl.textContent = '--';
        addMessage('消息已清空');
    }

    connectBtn.addEventListener('click', connectWebSocket);
    disconnectBtn.addEventListener('click', disconnectWebSocket);
    clearBtn.addEventListener('click', clearMessages);

    // 页面加载完成后的初始消息
    window.addEventListener('load', function () {
        addMessage('页面加载完成，准备测试 WebSocket 连接');
        updateStats();
    });
</script>
</body>
</html>